<template>
	<view class="pages-home rel" :style="{background:pageColor}" v-if="detail.id">
		<!-- #ifdef H5 -->
		<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
			:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]"
			style="z-index: 999;margin-top:25rpx;" v-if="options.pid">
			<view class="iconshouye iconfont"></view>
			<view class="back-user_text">回到首页</view>
		</view>
		<!-- #endif -->
		<block>
			<banner :list="detail.imgs" :margin="0" :autoplay="true" :height="667" :indicatorActiveColor="primaryColor">
			</banner>
			<view class="d-info rel ml-md mr-md fill-base rel"
				:style="{borderRadius:configInfo.plugAuth.memberdiscount && !detail.member_status?'26rpx 26rpx 20rpx 20rpx':'20rpx'}">
				<view @tap.top="$util.toCheckLogin({url:`/memberdiscount/pages/index`})"
					class="discount-info flex-center f-caption"
					v-if="configInfo.plugAuth.memberdiscount && !detail.member_status">
					<image class="discount-img"
						:src="`https://api.huixuananmm.com/admin/anmo/memberdiscount/detail-tag.png`">
					</image>
					<view class="flex-1 ml-sm flex-between">
						<view class="flex-y-center">开通会员，本单<view class="text-bold">{{detail.member_discount}}</view>
							折，预计再省 <view class="text-bold">{{detail.member_discount_price}}</view>元</view>
						<view class="vip-order-btn flex-center pl-sm">去开通
              <image src="../../static/img/mine/rightBtn.png" class="btnImg"></image>
            </view>
					</view>
				</view>

				<view class="detail-info fill-base rel" :style="{marginTop: detail.member_status ? '':'-20rpx'}">
					<!--<image :src="`https://api.huixuananmm.com/admin/industry/service/detail-01.png`" mode="aspectFill"
						class="abs d-bg"></image>-->
				<view class="flex-y-center flex-1 rel mb-top-16">
					<view class="flex-y-end text-bold mr-sm">
						<view class="flex-y-baseline">
							<view class="c-warning f-caption">¥</view>
							<view class="f-big-title c-warning" style="height:46rpx;line-height: 46rpx;">
								{{detail.price}}
							</view>
						</view>
						<view class="f-paragraph c-warning" v-if="detail.show_unit"> /{{detail.show_unit}}
						</view>
					</view>
					<view class="member-canbuy-level ml-sm"
						v-if="detail.member_info && detail.member_info.title">
						<view class="text flex-center">{{detail.member_info.title}}专享</view>
					</view>
					<view class="huiyuanjia" v-if="detail.member_price">
						<view class="huiyuanjia-title">会员价</view>
						<view class="huiyuanjia-price">
							¥
							<view class="huiyuanjia-price-text">{{ detail.member_price }}</view>
						</view>
					</view>
				</view>
					<view class="rel flex-between">
						<view class="f-md-title text-bold max-500 ellipsis">{{detail.title}}</view>

					</view>
					<view class="yishou-top pt-sm">
												<view class="flex-center f-caption d-label d-label-time rel yishou-top-text" >
							<view class="d-label-time abs" ></view>
							{{detail.time_long}}分钟
						</view>
						<view class="f-caption c-paragraph" v-if="detail.show_salenum">
							已售{{detail.total_sale | handleFormatNum}}</view>
					</view>
					<view class="rel pt-md flex-y-center" v-if="detail.position_data.length > 0">
						<text class="f-caption c-paragraph mr-sm d-label-titel">服务部位</text>
						<view class="flex-warp flex-1">
							<block v-for="(item,index) in detail.position_data" :key="index">
								<view class="d-label-item mr-sm flex-center f-caption mt-sm mb-sm"
									:style="{color:primaryColor, border:`1px solid ${primaryColor}`}">{{item.title}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="mt-md ml-md mr-md pd-lg radius-16 d-store fill-base">
				<view class="flex-between">
					<text class="f-title text-bold">适用门店(2)</text>
					<i class="iconfont icongengduo"></i>
				</view>
				<view class="pt-lg flex-center">
					<image :src="`https://api.huixuananmm.com/admin/farm/default-user.png`" mode="aspectFill"
						class="d-store-cover"></image>
					<view class="flex-1">
						<view class="flex-y-center">
							<view class="f-paragraph text-bold">蓉城阳光(动物园店)</view>
							<view class="d-store-label mr-sm flex-center f-caption mt-sm mb-sm ml-sm"
								:style="{color:primaryColor, border:`1px solid ${primaryColor}`}">营业中</view>
						</view>
						<view class="flex-y-center">
							<i class="iconfont iconyduixingxingshixin icon-font-color"></i>
							<text class="f-icontext" style="color: #F89831;">4.5</text>
							<view class="pl-md pr-md f-caption" style="color: #6F6F6F;">19:00-05:00</view>
							<text class="f-caption c-paragraph">1.4km</text>
						</view>
						<view class="flex-y-center pt-sm">
							<view class="d-store-opinion f-ms-little">好评率99.9%</view>
							<view class="d-store-taking f-ms-little">接单率100%</view>
							<view class="d-store-service f-ms-little">1万+次服务</view>
						</view>
					</view>
					<view class="d-store-phone">
						<view class="phone-icon flex-center">
							<i class="iconfont icondianhua" style="font-size: 14px;"></i>
						</view>
						<view class="flex-center f-little">电话</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="radius-16 fill-base d-guarantee pt-lg pb-lg pl-md pr-md mt-md ml-md mr-md" :style="{
			background: `linear-gradient(170deg, ${rgbaColor} 0%, #FFFFFF 30%)`}" v-if="detail.guarantee_data.length > 0">
				<image :src="`https://api.huixuananmm.com/admin/industry/service/guarantee-nav.png`" mode="aspectFill"
					class="guarantee-nav"></image>
				<scroll-view scroll-x class="mt-md" style="width: 670rpx;white-space: nowrap;">
					<view class="mr-md" style="display: inline-block;" v-for="(item,index) in detail.guarantee_data"
						:key="index">
						<view class="flex-y-center d-guarantee-item" :style="{background:rgbaColor}">
							<view class="">
								<view class="flex-y-center">
									<view class="flex-center guarantee-item-icon rel">
										<i class="iconfont iconicon-gx " style="font-size: 7px;"
											:style="{color: primaryColor}"></i>
									</view>
									<view class="f-paragraph text-bold pl-sm" :style="{color: primaryColor}">
										{{item.title}}
									</view>
								</view>
								<view class="pt-sm f-caption" style="color: #6F6F6F;">{{item.sub_title}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<view class="radius-16 fill-base d-guarantee pt-lg pb-lg pl-md pr-md mt-md ml-md mr-md pingtaibaozheng">
				<img src="../../static/img/technician/pingtaibaozheng.png" alt="">
				<view class="pingtaibaozheng-top">
					<view class="pingtaibaozheng-item-top" v-for="(item,index) in detail.guarantee_data" :key="index">
						<text class="pingtaibaozheng-title">{{item.title}}</text>
						<text class="pingtaibaozheng-sub-title">{{item.sub_title}}</text>
					</view>
				</view>
			</view>
			<view class="ml-md mr-md mt-md fill-base pb-lg radius-16" style="overflow: hidden;">
				<view class="tab-list flex-center">
					<block v-for="(item,index) in tabList" :key="index">
						<view class="tab-item flex-1 flex-center rel" @tap="handerTabChange(index)"
							:class="[{'text-bold': index == activeIndex }]">
							<text class="rel tab-item-title">{{item.title}}</text>
							<image class="abs" :class="'tab-item-line'+(index + 1)"
								:style="{opacity: index == activeIndex ? 0.8 : 0 ,width:tabList.length==2?'125%':''}"
								:src="`https://api.huixuananmm.com/admin/industry/service/nav-${item.img}.png`"
								mode="aspectFill">
							</image>
						</view>
					</block>
				</view>
				<view class="space-sm"></view>
				<view class="fill-base f-paragraph c-desc ml-lg mr-lg mt-lg radius-16" style="text-align: justify;">
					<parser :html="detail[rule[tabList[activeIndex].id]]" @linkpress="linkpress" show-with-animation
						lazy-load>
						加载中...
					</parser>
				</view>
			</view>
		</block>

		<view class="space-max-footer"></view>

		<fix-bottom-button @confirm="toConfirm"
                       class="mybtn"
			:text="[{type:'confirm',text:options.coach_id?`立即下单`:`去下单`}]" bgColor="#fff">
		</fix-bottom-button>

		<!-- #ifdef APP-PLUS -->
		<view @tap.stop="toAppShare"
			class="common-share-btn detail fix flex-center flex-column c-base box-shadow radius"
			:style="{background:primaryColor}">
			<i class="iconfont iconweixin"></i>
			<view class="f-icontext">分享</view>
		</view>
		<view class="space-max-footer"></view>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				options: {},
				activeIndex: 0,
				tabList: [],
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				detail: {},
				rgbaColor: ''
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		async onLoad(options) {
			let launch = 0
			// #ifdef MP-WEIXIN 
			let {
				scene
			} = await uni.getLaunchOptionsSync()
			launch = scene // 1154：朋友圈
			options.launch = launch
			// #endif
			options = await this.updateCommonOptions(options)
			let {
				pid = 0,
					store_id = 0,
					coach_id = 0,
					is_work = 0
			} = options
			options.pid = pid * 1
			options.store_id = store_id * 1
			options.coach_id = coach_id * 1
			options.is_work = is_work * 1
			this.options = options
			this.$util.showLoading()
			await this.$util.toAsyAccLogin()
			await this.initIndex()
			if (this.scanRecordId) {
				this.updateScanRecord()
			}
		},
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif 
					this.updateUserItem({
						key: 'appShare',
						val: true
					})
				},
				onPullDownRefresh() {
					// #ifndef APP-PLUS
					uni.showNavigationBarLoading()
					// #endif
					this.initRefresh()
					uni.stopPullDownRefresh()
				},
				onShareTimeline() {
					let {
						id: pid = 0
					} = this.userInfo
					let {
						id,
						title,
						cover: imageUrl
					} = this.detail
					let query = `pid=${pid}&id=${id}`
					return {
						title,
						imageUrl,
						query
					}
				},
				onShareAppMessage(e) {
					let {
						id: pid = 0
					} = this.userInfo
					let {
						id,
						title,
						cover: imageUrl
					} = this.detail
					let path = `/user/pages/detail?pid=${pid}&id=${id}`
					this.$util.log(path)
					return {
						title,
						imageUrl,
						path,
					}
				},
				methods: {
					...mapActions(['getConfigInfo', 'getUserInfo', 'addScanRecord',
						'updateScanRecord', 'updateCommonOptions'
					]),
					...mapMutations(['updateUserItem']),
					async initIndex(refresh = false) {
						let {
							pid = 0,
								launch = 0
						} = this.options
						let code = this.scanRecordId
						// #ifdef H5
						code = this.$util.getQueryString('code')
						// #endif
						if (pid && !code) {
							this.addScanRecord({
								type: 2,
								qr_id: pid,
								is_qr: 0
							})
						}
						let {
							id: uid = 0
						} = this.userInfo
						if (!this.configInfo.id || refresh || (pid && code && !uid)) {
							await this.getConfigInfo()
						}
						if (launch != 1154 && pid && !code && !uid) {
							await this.getUserInfo()
						}

						await this.getDetail()

						this.rgbaColor = this.$util.rgbColor(this.primaryColor, 0.08)
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						// #ifdef H5 
						this.$jweixin.initJssdk(() => {
							this.toAppShare()
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.showShareMenu({
							menus: ['shareAppMessage', 'shareTimeline']
						})
						// #endif
					},
					initRefresh() {
						this.initIndex(true)
					},
					toAppShare() {
						let {
							id: pid = 0
						} = this.userInfo
						let {
							id,
							title,
							cover: imageUrl
						} = this.detail
						let summary = ''

						let {
							siteroot
						} = siteInfo
						let url = siteroot.split('/index.php')[0]
						let href = `${url}/${this.portName}/#/user/pages/detail?id=${id}&pid=${pid}`

						// #ifdef H5
						this.$jweixin.showOptionMenu()
						this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
						this.$jweixin.shareTimelineMessage(title, href, imageUrl)
						// #endif
						// #ifdef APP-PLUS
						let item = {
							href,
							title,
							summary,
							imageUrl,
						}
						if (this.configInfo.isIos) {
							this.$util.showLoading()
							this.toTransImg(item)
						} else {
							this.sharePage(item)
						}
						// #endif
					},
					toTransImg(item) {
						let that = this
						let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
						uni.downloadFile({
							url: item.imageUrl,
							success: (e) => {
								// 将png转换成jpg格式 只有jpg格式支持压缩api
								plus.zip.compressImage({
										src: e.tempFilePath,
										dst: `_doc/${cur_unix}.jpg`,
										format: "jpg"
									},
									response => {
										// 压缩图片
										plus.zip.compressImage({
											src: response.target,
											dst: `_doc/${cur_unix}-img.jpg`,
											quality: 50,
										}, res => {
											item.imageUrl = res.target || `/static/img/logo.png`
											that.sharePage(item)
										}, error => {
											item.imageUrl = `/static/img/logo.png`
											that.sharePage(item)
										})
									})
							}
						})
					},
					sharePage(item) {
						this.$util.hideAll()
						let {
							href,
							title,
							summary,
							imageUrl,
						} = item
						uni.share({
							provider: "weixin",
							scene: 'WXSceneSession',
							type: 0,
							href,
							title,
							summary,
							imageUrl,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					},
					async getDetail() {
						let {
							id
						} = this.options
						let data = await this.$api.service.serviceInfo({
							id
						})
						let {
							explain
						} = data
						this.detail = data
						let arr = [{
							id: 0,
							title: '项目介绍',
							img: 'left',
						}]
						if (explain && explain.length > 0) {
							arr.push({
								id: 1,
								title: '禁忌说明',
								img: 'center',
							})
						}
						this.tabList = arr.concat([{
							id: 2,
							title: '下单须知',
							img: 'right',
						}])
						this.$util.hideAll()
					},
					handerTabChange(index) {
						this.activeIndex = index;
					},
					linkpress(res) {
						// #ifdef APP-PLUS
						this.$util.goUrl({
							url: res.href,
							openType: 'web'
						})
						// #endif
					},
					toConfirm() {
						let {
							id,
							coach_id = 0,
							store_id = 0,
							pid = 0
						} = this.options
						if (coach_id) {
							this.toOrder()
							return
						}
						let {
							can_buy,
							title,
						} = this.detail.member_info
						if (!can_buy) {
							let msg = title ? title.includes('会员') ? title : `${title}会员` : '会员'
							this.$util.showToast({
								title: `您还不是${msg}`
							})
							return
						}
						let url = `/user/pages/choose-technician?id=${id}&store_id=${store_id}&pid=${pid}`
						this.$util.goUrl({
							url
						})
					},
					// 预约
					async toOrder(index) {
						let {
							id: service_id,
							coach_id = 0,
							is_work = 0
						} = this.options
						if (!is_work) {
							this.$util.showToast({
								title: `该${this.$t('action.attendantName')}未上班`
							})
							return
						}
						if (this.lockTap) return
						this.lockTap = true
						try {
							await this.$api.order.addCar({
								service_id,
								coach_id,
								num: 1,
								is_top: 1,
								coach_service: 1
							})
							this.lockTap = false
							let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`
							this.$util.goUrl({
								url
							})
						} catch (e) {
							this.lockTap = false
						}
					},
				},
				filters: {
					handleFormatNum(val) {
						let text = val
						if (val > 9999) {
							let num = val % 10000
							let num1 = parseInt(val / 10000)
							if (num) {
								text = `${num1}w+`
							} else {
								text = `${num1}w`
							}
						}
						return text
					}
				}
		}
</script>


<style lang="scss">
	.pages-home {
		.list-item {
			.item-btn {
				width: 129rpx;
				height: 54rpx;
			}
		}


		.memberdiscount-price-text.md {
			font-size: 20rpx;
			height: 36rpx;
			border-radius: 8rpx;
			background: #FAD669;

			.text {
				width: 94rpx;
				//background: linear-gradient(270deg, #4B5259 0%, #282B34 100%);
				//border-radius: 8rpx 0 12rpx 8rpx;
				//color: #FAE9B5
			}

			.price {
				min-width: 84rpx;
				//background: linear-gradient(270deg, #FAE9B5 0%, #F9D567 100%);
				//border-radius: 0 8rpx 8rpx 0;
				//color: #393D45;

				.num {
					font-size: 28rpx;
				}
			}
		}

		.d-info {
			margin-top: -117rpx;
			overflow: hidden;


			.discount-info {
				width: 100%;
				height: 102rpx;
				background: linear-gradient(270deg, #4B5259 0%, #282B34 100%);
				border-radius: 20rpx 20rpx 0 0;
				color: #FAE9B5;
				padding: 0 30rpx 20rpx 30rpx;

				.discount-img {
					width: 32rpx;
					height: 32rpx;
				}

				.vip-order-btn {
          width: 171rpx;
          height: 52rpx;
          background: linear-gradient( 90deg, #FFDD8C 0%, #FCF4D7 100%);
          border-radius: 40rpx 40rpx 40rpx 40rpx;
          color: #4A2F02;
          font-size: 24rpx;

          .btnImg {
            height: 28rpx;
            width: 28rpx;
            margin-left: 12rpx;
          }
				}
			}

			.detail-info {
				padding: 36rpx 30rpx 40rpx 30rpx;
				border-radius: 20rpx;
				z-index: 2;


				.d-bg {
					width: 100%;
					height: 207rpx;
					border-radius: 20rpx;
					top: 0;
					left: 0;
				}

				.d-label {
					padding: 2px 11rpx;
					border-radius: 4rpx;
				}

				.d-label-titel {
					height: 38rpx;
					line-height: 38rpx;
				}

				.d-label-item {
					min-width: 84rpx;
					line-height: 34rpx;
					border-radius: 8rpx;
					padding: 4rpx 4rpx 0 4rpx;
				}

				.d-label-time {
					min-width: 90rpx;
					height: 42rpx;
					padding: 0 10rpx;
					border-radius: 8rpx;
					opacity: 1;
				}

				.d-label-time.abs {
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					opacity: 0.14;
					padding: 0;
				}
			}
		}

		.d-store {
			.d-store-cover {
				width: 102rpx;
				height: 102rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
			}

			.d-store-label {
				min-width: 84rpx;
				height: 38rpx;
				border-radius: 4rpx;
				padding: 0 2px;
			}

			.phone-icon {
				width: 44rpx;
				height: 44rpx;
				background: #F4F4F4;
				border-radius: 14rpx;
				margin-bottom: 2px;
			}

			.iconyduixingxingshixin {
				background-image: -webkit-linear-gradient(#FF6617 0%, #F7A31C 100%);
				font-size: 12px;
			}

			.d-store-opinion,
			.d-store-taking {
				padding: 1px 4px;
				color: #7D422C;
				border-radius: 8rpx;
				background-color: #FFEEDC;
				margin-right: 16rpx;
			}

			.d-store-service {
				padding: 1px 4px;
				color: #FF4C20;
				background: #FFEEEB;
				border-radius: 8rpx;
			}
		}

		.d-guarantee {

			.guarantee-nav {
				width: 455rpx;
				height: 41rpx;
			}

			.d-guarantee-icon {
				width: 40rpx;
				height: 49rpx;
			}

			.d-guarantee-item {
				min-width: 245rpx;
				height: 121rpx;
				border-radius: 8rpx;
				padding: 0 20rpx;
			}

			.guarantee-item-icon {
				width: 24rpx;
				height: 24rpx;
				border: 1px solid #333333;
				border-radius: 24rpx;

				.iconicon-gx {
					padding-top: 1px;
				}
			}
		}

		.tab-list {
			height: 78rpx;

			.tab-item-title {
				z-index: 1;
			}

			.tab-item-line1 {
				width: 242rpx;
				height: 78rpx;
			}

			.tab-item-line2 {
				width: 282rpx;
				height: 78rpx;
			}

			.tab-item-line3 {
				width: 244rpx;
				height: 78rpx;
			}
		}
	}
	.yishou-top {
		display: flex;
		justify-content: space-between;
	}
	.yishou-top-text {
		color: #666666;
	}
	.huiyuanjia {
		display: flex;
		align-items: center;
		width: 206rpx;
		height: 44rpx;
		background: url('../../static/img/technician/huiyuanjia.png');
		background-size: 100% 100%;
		font-size: 24rpx;
		color: #FAE7C7;
	}
	.huiyuanjia-title {
		margin-left: 10rpx;
	}
	.huiyuanjia-price {
		color: #2D2D31;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}
	.huiyuanjia-price-text {
		font-size: 30rpx;
	}
	.mb-top-16 {
		margin-bottom: 16rpx;
	}
	.pingtaibaozheng {
		position: relative;
	}
	.pingtaibaozheng-top {
		position: absolute;
		top: 105rpx;
		left: 100rpx;
		font-size: 24rpx;
	}
	.pingtaibaozheng-title {
		color: #0F3B2B;
		font-weight: 500;
		margin-right: 32rpx;
	}
	.pingtaibaozheng-sub-title {
		color: #0F3B2B;
		font-weight: 400;
	}
	.edit-img,
	.thumbs_num-img,
	.comment_num-img {
		width: 26rpx;
		height: 26rpx;
	}
	.flex-top {
		display: flex;
		align-items: center;
	}
	.btn-top {
		width: 145rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 96rpx;
	}
	.zuizaokeyue {
	}
	.zuizaokeyue-img {

	}
	.zuizaokeyue-text {
		font-size: 20rpx;
		color: #333333;
	}
	.zuizaokeyue-time {
		font-size: 20rpx;
		color: #333333;
		transform: translateX(-50%);
	}

  .mybtn {
    ::v-deep .bottom-view {
      background: linear-gradient( 142deg, #A5FFA2 0%, #69DE81 54%, #58C06E 100%) !important;
      font-weight: bold !important;
      font-size: 48rpx !important;
    }
  }
</style>